<!DOCTYPE html>
<html>
<head>
    <title>AI Chat</title>
    <!-- 引入Bootstrap样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <style>
        .chat-box { 
            height: 500px; 
            overflow-y: auto; 
            border: 1px solid #ddd; 
            padding: 20px; 
        }
        .message { 
            margin-bottom: 15px; 
        }
        .user-message { 
            color: #00ff2a; 
        }
        .ai-message { 
            color: #2831a7; 
        }
    </style>
</head>
<body>
    <!-- Django CSRF令牌（必须添加） -->
    {% csrf_token %}
    
    <div class="container mt-4">
        <h2>AI Chat</h2>
        
        <!-- 聊天消息容器 -->
        <div class="chat-box mb-3" id="chatBox">
            {% for msg in messages %}
                <div class="message user-message">You: {{ msg.user_input }}</div>
                <div class="message ai-message">AI: {{ msg.ai_response }}</div>
            {% endfor %}
        </div>

        <!-- 输入区域 -->
        <div class="input-group">
            <input type="text" id="messageInput" class="form-control" placeholder="Type your message...">
            <button class="btn btn-primary" onclick="sendMessage()">Send</button>
        </div>
    </div>

    <!-- 引入jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <script>
        // 获取Cookie值的工具函数
        function getCookie(name) {
            let cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                // 将Cookie字符串分割成数组
                const cookies = document.cookie.split(';');
                for (let i = 0; i < cookies.length; i++) {
                    const cookie = cookies[i].trim();
                    // 检查Cookie名称是否匹配
                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
                        // 解码并获取Cookie值
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }

        // 配置所有AJAX请求默认携带CSRF令牌
        $.ajaxSetup({
            headers: {
                // 从Cookie获取CSRF令牌并设置请求头
                "X-CSRFToken": getCookie("csrftoken")
            }
        });

        // 发送消息函数
        function sendMessage() {
            const message = $('#messageInput').val().trim();
            if (!message) return;

            // 发送AJAX POST请求
            $.ajax({
                type: "POST",
                url: "",  // 当前URL
                data: {
                    message: message,
                    // 双重保障：同时携带表单中的CSRF令牌
                    csrfmiddlewaretoken: $('input[name="csrfmiddlewaretoken"]').val()
                },
                success: function(response) {
                    // 添加新消息到聊天框顶部（注意顺序）
                    $('#chatBox').prepend(
                        `<div class="message ai-message">AI: ${response.response}</div>` +
                        `<div class="message user-message">You: ${message}</div>`
                    );
                    // 清空输入框
                    $('#messageInput').val('');
                    // 自动滚动到底部
                    //$('#chatBox').scrollTop($('#chatBox')[0].scrollHeight);
                },
                error: function(xhr) {
                    // 错误处理
                    console.error("Error:", xhr.statusText);
                    alert('发送失败，请检查网络连接');
                }
            });
        }

        // 绑定回车键发送消息
        $('#messageInput').keypress(function(e) {
            if (e.which === 13) {  // 回车键的keycode是13
                sendMessage();
                return false;  // 阻止默认表单提交行为
            }
        });
    </script>
</body>
</html>